<template>
  <div>
    {{ time }}
  </div>
</template>

<script setup>
import moment from 'moment'
import { formatSecondsToHMS } from '@/utils/globalMethod'

import { ref, computed, onUnmounted, watch } from 'vue'
const props = defineProps({
  oldTime: {
    type: String
  }
})

const oldTimeToNow = ref(
  moment(new Date(moment().format('YYYY-MM-DD HH:mm:ss'))).diff(
    props.oldTime,
    'seconds'
  )
)

let timer = null

timer = setInterval(() => {
  oldTimeToNow.value++
}, 1000)

watch(
  () => props.oldTime,
  () => {
    oldTimeToNow.value = moment(
      new Date(moment().format('YYYY-MM-DD HH:mm:ss'))
    ).diff(props.oldTime, 'seconds')
  }
)

const time = computed(() => {
  return formatSecondsToHMS(oldTimeToNow.value)
})

onUnmounted(() => {
  clearInterval(timer)
})
</script>

<style scoped lang="scss"></style>
